<template>
  <a-layout-sider width="200" style="background: #fff" v-model:collapsed="collapsed" collapsible>
    <a-menu
      v-model:selectedKeys="selectedKeys1"
      v-model:openKeys="openKeys"
      mode="inline"
      :style="{ height: '100%', borderRight: 0 }"
    >
      <a-sub-menu key="sub1">
        <template #title>
          <CalendarFilled />
          <span>测试管理</span>
        </template>
        <a-menu-item key="1" @click="menuTarget('/auto_exe_log')">
          <OrderedListOutlined />
          <span>CD测试执行记录</span>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <template #title>
          <UsergroupAddOutlined />
          <span>系统管理</span>
        </template>
        <a-menu-item key="2" @click="menuTarget('/user_list')">
          <UserOutlined />
          <span>用户管理</span>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  UsergroupAddOutlined,
  UserOutlined,
  OrderedListOutlined,
  CalendarFilled,
} from '@ant-design/icons-vue'

const selectedKeys1 = ref<string[]>(['1'])
const openKeys = ref<string[]>(['sub1'])
const collapsed = ref<boolean>(false)

// 路径管理
const route = useRoute()
const router = useRouter()
// 菜单点击跳转
function menuTarget(urlPath: string) {
  router.push(urlPath)
}
</script>

<style lang="scss" scoped></style>
